<script setup>
    import { onMounted } from 'vue'
    import { useRoute } from 'vue-router'
    import { getVrHkxx } from '@/api/govern'
    import { ElMessage } from 'element-plus'
    import MemberInfo from './components/MemberInfo.vue'

    const route = useRoute()
    onMounted(() => {
        init()
    })

    // 房屋信息
    let houseData = $ref({})

    // 家庭成员
    let dzPopulaceNewsData = $ref({})

    // 网格信息
    let yzGridPeronData = $ref()

    let dataLoading = $ref(false)

    const init = (headers = {}) => {
        dataLoading = true 
        getVrHkxx({ account: route.query.id }, headers).then(res => {
            dataLoading = false
            if(res.success){
                dialogVisible = false
                let { yzHouseList, dzPopulaceNewsList, yzGridPeronLst } = res.result
                houseData = yzHouseList.result.records[0]
                dzPopulaceNewsData = dzPopulaceNewsList.result?.records
                yzGridPeronData = yzGridPeronLst.result?.records
            }
        })
    }

    // 查看完整信息
    let dialogVisible = $ref(false)

    // 密码
    let password = $ref('')

    const handleClick = () => {
        if(!password){
            ElMessage.error('请输入密码');
            return
        }
        init({ key: password })
    }

    // 显示人物画像
    let memberInfo = $ref(null)
    const showPersonDetails = (item) => {
        memberInfo.showDetails(item)
    }


</script>

<template>
    <div class="dz-family-info" v-loading="dataLoading">
    
        <div class="info-item">
            <div class="info-title flex-between">
                <div class="flex">
                    <div class="title flex-center">
                        <img src="../../assets/images/hukuang_1.png">
                        房屋信息
                    </div>
                    <div class="desc flex-center">
                        <img src="../../assets/images/hukuang_2.png">
                        {{ houseData.account }}
                    </div>
                </div>
                <el-button type="primary" @click="dialogVisible=true">查看完整信息</el-button>
            </div> 

            <ul class="info-card">
                <li>户主姓名：{{ houseData.householdName || '/' }}</li>
                <li>联系电话：{{ houseData.phone || '/' }}</li>
                <li>房屋类型：{{ houseData.houseType_dictText || '/' }}</li>
                <li>房屋状态：{{ houseData.status_dictText || '/' }}</li>
                <li class="address">详细地址：{{ houseData.address || '/' }}</li>
            </ul>
        </div>

        <div class="info-item">
            <div class="info-title flex">
                <div class="title flex-center">
                    <img src="../../assets/images/hukuang_3.png">
                    家庭成员
                </div>
            </div> 

            <div class="info-table" v-if="dzPopulaceNewsData && dzPopulaceNewsData.length">
                <el-table 
                    :data="dzPopulaceNewsData" 
                    style="width: 100%"
                    size="large"
                    class="dz-table family-member-info"
                >
                    <el-table-column type="index" label="姓名" width="80">
                        <template #default="scope">
                            {{ scope.row.name || '/' }}
                            <img class="dang-img" v-if="scope.row.politicsStatus && scope.row.politicsStatus.indexOf('党') > -1" src="../../assets/images/dang.png">
                        </template>
                    </el-table-column>
                    <el-table-column prop="ownerConcern_dictText" label="与户主关系" min-width="80" align="center">
                        <template #default="scope">
                            {{ scope.row.ownerConcern_dictText || '/' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="sex_dictText" label="性别" min-width="60">
                        <template #default="scope">
                            {{ scope.row.sex_dictText || '/' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="education_dictText" label="文化程度" min-width="70">
                        <template #default="scope">
                            {{ scope.row.education_dictText || '/' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="politicsStatus" label="政治面貌" min-width="80" align="center">
                        <template #default="scope">
                            {{ scope.row.politicsStatus || '/' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="idCard" label="身份证号" min-width="150" align="center">
                        <template #default="scope">
                            {{ scope.row.idCard || '/' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="联系电话" min-width="100" align="center">
                        <template #default="scope">
                            {{ scope.row.phone || '/' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="workUnit" label="工作单位" min-width="70" align="center">
                        <template #default="scope">
                            {{ scope.row.workUnit || '/' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="isCjh" label="是否残疾人" min-width="90" align="center">
                        <template #default="scope">
                            {{ scope.row.isCjh != 0 ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="isCjh" label="是否低保户" min-width="90" align="center">
                        <template #default="scope">
                            {{ scope.row.isDb != 0 ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="isCjh" label="是否退役军人" min-width="98" align="center">
                        <template #default="scope">
                            {{ scope.row.isVeteran != 0 ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="isCjh" label="是否五保户" min-width="90" align="center">
                        <template #default="scope">
                            {{ scope.row.isFb != 0 ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" min-width="90" align="center">
                        <template #default="scope">
                            {{ scope.row.remark || '/' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="操作" min-width="90" align="center">
                        <template #default="scope">
                            <el-link type="primary" @click="showPersonDetails(scope.row)">人物画像</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <div class="info-item" v-if="yzGridPeronData && yzGridPeronData.length">
            <div class="info-title flex">
                <div class="title flex-center">
                    <img src="../../assets/images/hukuang_4.png">
                    网格信息
                </div>
            </div> 

            <ul class="info-card gridding-info-card">
                <li>网格名称：{{ yzGridPeronData[0].sysOrgCode_dictText }}</li>
                <li>网格编号：{{ yzGridPeronData[0].sysOrgCode }}</li>
                <!-- <li>管理户数：739户</li> -->
                <br />
                <template v-for="(item, index) in yzGridPeronData" :key="index">
                    <li>姓名：{{ item.name }}</li>
                    <li>职务：{{ item.position_dictText }}</li>
                    <li>联系电话：{{ item.phone || '/' }}</li>
                    <li>备注：{{ item.remark }}</li>
                </template>
            </ul>
        </div>

    </div>

    <el-dialog
        v-model="dialogVisible"
        title="输入密码"
        width="520px"
        custom-class="family-info-dialog"
    >
        <div class="flex-center">
            <el-input placeholder="请输入密码" size="large" type="password" v-model="password"></el-input>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleClick"
                >确定</el-button
                >
            </span>
        </template>
    </el-dialog>

    <member-info ref="memberInfo"></member-info>



</template>

<style lang="less">
    .dz-family-info{
        width: 100%;
        min-width: 1050px;
        height: 100%;
        overflow: auto;
        padding: 40px;
        background: #FFFFFF;

        .info-item{
            margin-bottom: 16px;

            .info-title{
                .title{
                    font-weight: bold;
                }

                img{
                    margin-right: 8px;
                }

                .desc{
                    margin-left: 130px;
                }
            }

            .info-card{
                margin-top: 12px;
                background: #F3F9FF;
                padding: 16px 24px 0;

                li{
                    font-size: 14px;
                    display: inline-block;
                    width: 210px;
                    margin-right: 20px;
                    padding-bottom: 16px;

                    &.address{
                        width: 500px;
                    }
                }

                &.gridding-info-card li{
                    width: 25%;
                    margin: 0;
                }
            }

            .info-table{
                margin-top: 12px;

                .dang-img{
                    display: inline-block;
                    width: 20px;
                    margin-left: 5px;
                    vertical-align: top;
                }

                .table-row{
                    font-size: 14px;
                    line-height: 32px;
                    background: #F3F9FF;
                    display: flex;

                    &.header{
                        background: #C6DAED;
                    }
                    
                }
            }
        }
    }

    .family-info-dialog{
        .el-form-item__label, .el-input__inner, .el-range-input, .el-date-editor .el-range-separator{
            color: #333 !important;
        }
    }

    .family-member-info.dz-table.el-table td.el-table__cell, .family-member-info.dz-table.el-table th.el-table__cell.is-leaf{
        background:#F3F9FF;
        color: #333;
    }

    
    .family-member-info.dz-table.el-table--large .cell{
        padding: 0 5px;
        cursor:auto
    }
</style>